<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { $Inquire } from '@/api/health'

// const route = useRoute()
const router = useRouter()

const selectList = ref([])
// 挂载前调用
onBeforeMount(() => {
    $Inquire().then((res: any) => {
        selectList.value = res.data.slice(2, 7)
    })
})

// 跳转健康详情
const goToHealthDetail = (id) => {
    router.push('/healthDetail?id=' + id)
}

</script>

<template>
    <div class="select">
        <div class="select-title">优选·图文</div>
        <div class="select-list">
            <div class="select-item" @click="goToHealthDetail(item.id)" v-for="item in selectList" :key="item.id">
                <img class="select-item-img" :src="item.url" alt="">
                <div class="select-item-text">{{ item.title }}</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.select {
    flex: 3;
    display: flex;
    flex-direction: column;
    height: 94vh;
    background: #f7f7f7;
    margin-left: 2vw;
    box-shadow: 0.2vw 0.2vw 0.2vw #ccc;

    .select-title {
        font-size: 1.5vw;
        font-weight: 800;
        margin: 1vw;
    }

    .select-list {
        display: flex;
        flex-direction: column;

        .select-item {
            display: flex;
            padding: 1vw;
            height: 17vh;
            border-top: 0.5vh solid #fff;
            cursor: pointer;

            .select-item-img {
                width: 8vw;
                margin-right: 1vw;
            }

            .select-item-text {
                font-size: 1.2vw;
                margin-top: 1vh;
            }
        }
    }
}
</style>